<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="css/hero.css">
</head>

<body>
	<a href="javascript:" id="create">创建英雄列表</a>
	<ul class="list">

		<!-- <li><img src="uploads/heros/01.jpg" title="司马懿"></li> -->
	</ul>

	<script>
		const datas = [
			{ name: '司马懿', imgSrc: '01.jpg' },
			{ name: '女娲', imgSrc: '02.jpg' },
			{ name: '百里守约', imgSrc: '03.jpg' },
			{ name: '亚瑟', imgSrc: '04.jpg' },
			{ name: '虞姬', imgSrc: '05.jpg' },
			{ name: '张良', imgSrc: '06.jpg' },
			{ name: '安其拉', imgSrc: '07.jpg' },
			{ name: '李白', imgSrc: '08.jpg' },
			{ name: '阿珂', imgSrc: '09.jpg' },
			{ name: '墨子', imgSrc: '10.jpg' },
			{ name: '鲁班', imgSrc: '11.jpg' },
			{ name: '嬴政', imgSrc: '12.jpg' },
			{ name: '孙膑', imgSrc: '13.jpg' },
			{ name: '周瑜', imgSrc: '14.jpg' },
			{ name: 'XXX', imgSrc: '15.jpg' },
			{ name: 'XXX', imgSrc: '16.jpg' },
			{ name: 'XXX', imgSrc: '17.jpg' },
			{ name: 'XXX', imgSrc: '18.jpg' },
			{ name: 'XXX', imgSrc: '19.jpg' },
			{ name: 'XXX', imgSrc: '20.jpg' }
		]
		// 获取元素
		let a = document.querySelector('#create')
		let ul = document.querySelector('.list')

		// 定义函数
		function fn() {
			// 声明一个空字符串 存储数据
			let str = ''
			// 遍历datas数组
			datas.forEach(function (item, index) {
				// 把每次遍历出来的值 拼接到li标签里面
				str += `
				<li><img src="uploads/heros/${item.imgSrc}" title="${item.name}"></li>
				`
			})
			// 把str里的值赋值给 ul
			ul.innerHTML = str
		}

		a.addEventListener('click', function () {
			// let str = ''
			// datas.forEach(function (item, index) {
			// 	str += `
			// 	<li><img src="uploads/heros/${item.imgSrc}" title="${item.name}"></li>
			// 	`
			// })
			// ul.innerHTML = str
			// console.log(ul.innerHTML)
			fn()
		})

	</script>
</body>

</html>